<template>
  <div class="tab-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="通知公告" name="first">
        <div class="tabpane-container">
          <template v-if="announceList && announceList.length > 0">
            <template v-for="item in announceList">
              <div :key="item.id" class="list-item">
                <a @click="goToAnnounceDetail(item.id)">{{ item.title }}</a>
                <span>{{ item.createdTime | format('YYYY-MM-DD HH:mm:ss') }}</span>
              </div>
              <el-divider :key="item.id" />
            </template>
            <el-pagination
              class="info-pagination"
              layout="total, prev, pager, next"
              :total="announcePagination.total"
              :current-page="announcePagination.current"
              :page-size="announcePagination.pageSize"
              @current-change="announcePageChange"
            />
          </template>
          <div v-else class="no-list">暂无公告</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="政策文件" name="second">
        <div class="tabpane-container">
          <template v-if="fileList && fileList.length > 0">
            <template v-for="item in fileList">
              <div :key="item.id" class="list-item">
                <pdf-enter
                  :src="item.url"
                  :words="item.name"
                />
                <span>{{ item.createdTime | format('YYYY-MM-DD HH:mm:ss') }}</span>
              </div>
              <el-divider :key="item.id" />
            </template>
            <el-pagination
              class="info-pagination"
              layout="total, prev, pager, next"
              :total="filePagination.total"
              :current-page="filePagination.current"
              :page-size="filePagination.pageSize"
              @current-change="filePageChange"
            />
          </template>
          <div v-else class="no-list">暂无政策文件</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="典型案例" name="third">
        <div class="tabpane-container">
          <template v-if="exampleList && exampleList.length > 0">
            <template v-for="item in exampleList">
              <div :key="item.id" class="list-item">
                <pdf-enter
                  :src="item.url"
                  :words="item.name"
                />
                <span>{{ item.createdTime | format('YYYY-MM-DD HH:mm:ss') }}</span>
              </div>
              <el-divider :key="item.id" />
            </template>
            <el-pagination
              class="info-pagination"
              layout="total, prev, pager, next"
              :total="examplePagination.total"
              :current-page="examplePagination.current"
              :page-size="examplePagination.pageSize"
              @current-change="examplePageChange"
            />
          </template>
          <div v-else class="no-list">暂无典型案例</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="业务指导" name="forth">
        <div class="tabpane-container">
          <template v-if="bussinessList && bussinessList.length > 0">
            <template v-for="item in bussinessList">
              <div :key="item.id" class="list-item">
                <pdf-enter
                  :src="item.url"
                  :words="item.name"
                />
                <span>{{ item.createdTime | format('YYYY-MM-DD HH:mm:ss') }}</span>
              </div>
              <el-divider :key="item.id" />
            </template>
            <el-pagination
              class="info-pagination"
              layout="total, prev, pager, next"
              :total="bussinessPagination.total"
              :current-page="bussinessPagination.current"
              :page-size="bussinessPagination.pageSize"
              @current-change="bussinessPageChange"
            />
          </template>
          <div v-else class="no-list">暂无业务指导</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="风采展示" name="fifth">
        <div class="tabpane-container">
          <template v-if="imgList && imgList.length > 0">
            <el-carousel ref="img-carousel" :autoplay="false" :interval="5000" trigger="click" height="500px" @change="whenChange">
              <el-carousel-item v-for="item in imgList" :key="item.id">
                <img v-if="item.image" :src="item.image" alt="">
              </el-carousel-item>
            </el-carousel>
            <div style="margin: 10px 0; text-align: center;">{{ name }}</div>
          </template>
          <div v-else class="no-list">暂未配置</div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import PdfEnter from '@/components/pdf-enter'
import { getFileList, getAnnounceList, getImgList } from '@/api/operate'
import { toHttps } from '@/utils'
export default {
  name: 'Info',
  components: { PdfEnter },
  data() {
    return {
      activeName: 'first',
      announceList: [],
      announcePagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      announceIsInit: false,
      fileList: [],
      filePagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      fileIsInit: false,
      bussinessList: [],
      bussinessPagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      bussinessIsInit: false,
      exampleList: [],
      examplePagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      exampleIsInit: false,
      imgList: [],
      name: '',
      imgIsInit: false
    }
  },
  mounted() {
    if (this.$route.name === 'info') {
      const { tab } = this.$route.params
      this.activeName = tab || 'first'
      switch (tab || 'first') {
        case 'first':
          this.getAnnounce(1)
          break
        case 'second':
          this.getFile(1)
          break
        case 'third':
          this.getExample(1)
          break
        case 'forth':
          this.getBussiness(1)
          break
        case 'fifth':
          this.getImg()
          break
        default:
      }
    }
  },
  methods: {
    handleClick(tab) {
      if (tab.name === 'first' && !this.announceIsInit) {
        this.getAnnounce(1)
        console.log('加载公告列表')
      }
      if (tab.name === 'second' && !this.fileIsInit) {
        this.getFile(1)
      }
      if (tab.name === 'third' && !this.exampleIsInit) {
        this.getExample(1)
      }
      if (tab.name === 'forth' && !this.bussinessIsInit) {
        this.getBussiness(1)
      }
      if (tab.name === 'fifth' && !this.imgIsInit) {
        this.getImg()
      }
    },
    async getImg() {
      this.loading = true
      try {
        const res = await getImgList()
        if (res) {
          this.imgList = res
          this.name = res[0] ? res[0].name : ''
        }
        this.loading = false
      } catch (err) {
        this.loading = false
        console.log('接口出错')
      }
    },
    whenChange(index) {
      this.name = this.imgList[index].name
    },
    async getAnnounce(current) {
      this.loading = true
      try {
        const res = await getAnnounceList({
          pageNum: current,
          pageSize: 10
        })
        if (res && res.list) {
          this.announceList = res.list
          this.announcePagination = {
            current: res.pageNum,
            pageSize: res.pageSize,
            total: res.totalElements
          }
          this.announceIsInit = true
        }
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
    async getFileList(current, type, listName) {
      this.loading = true
      try {
        const res = await getFileList({
          pageNum: current,
          pageSize: 10,
          type
        })
        if (res && res.list) {
          this[`${listName}List`] = res.list.map(v => ({ ...v, url: toHttps(v.url) }))
          this[`${listName}Pagination`] = {
            current: res.pageNum,
            pageSize: res.pageSize,
            total: res.totalElements
          }
          this[`${listName}IsInit`] = true
        }
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
    getFile(current) {
      this.getFileList(current, 1, 'file')
    },
    getBussiness(current) {
      this.getFileList(current, 3, 'bussiness')
    },
    getExample(current) {
      this.getFileList(current, 2, 'example')
    },
    filePageChange(page) {
      this.getFile(page)
    },
    examplePageChange(page) {
      this.getExample(page)
    },
    bussinessPageChange(page) {
      this.getBussiness(page)
    },
    announcePageChange(page) {
      this.getAnnounce(page)
    },
    goToAnnounceDetail(id) {
      this.$router.push({
        path: `/home/announcedetail/${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  padding: 0; margin: 0;
}
.tab-container {
  background: #fff;
  padding: 15px 15px 30px;
  .tabpane-container {
    padding-top: 20px;
  }
}
.list-item {
  overflow: hidden;
  font-size: 14px;
  a {
    float: left;
    padding-left: 15px;
  }
  a:hover {
    text-decoration: underline;
    color: #409eff;
  }
  span {
    float: right;
    color: #bbb;
    padding-right: 15px;
  }
}
.no-list {
  padding-left: 15px;
}
.info-pagination {
  margin-top: 30px;
  text-align: center;
}
.el-carousel__item {
  height: 500px;
}
.el-carousel__item img {
  width: 100%;
  height: 500px;
  object-fit: contain;
}
</style>
